<template>
  <div class="app-container">

    <el-form ref="form" :model="form" label-width="100px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
        <div style="padding-left: 25px;font-size: 18px;color: #00aaee" v-if="this.activeName != 'basic'">
          {{this.tabLabel}} | {{form.name}} / {{this.age}}岁 / {{form.idNo}}
        </div>
<!--        <el-row :gutter="20" class="el-row1" type="flex">-->
<!--          <el-col :span="8">-->
<!--&lt;!&ndash;            <el-form-item label="">{{ form.idNo }}</el-form-item>&ndash;&gt;-->
<!--            {{ form.idNo }}-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-tab-pane label="人员信息" name="basic">
          <el-row :gutter="20" class="el-row0" type="flex">
            <el-divider content-position="left">基本信息</el-divider>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="8">
              <el-form-item label="姓名">{{ form.name }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话">{{ form.phone }}</el-form-item>
            </el-col>
            <el-col :span="8">

              <div class="img-list">
                <div class="img-li-box">
                  <img class="img-li-b--url" v-if="form.photo==''|| form.photo==undefined" :src="require('@/assets/images/profile.jpg')"/>
                  <img class="img-li-b--url" v-else :src="base + form.photo"/>
                  <div class="img-li-b--bottom">
                    <div class="img-li-b--name">身份证照</div>
                  </div>
                </div>
                <div class="img-li-box">
                  <img class="img-li-b--url" v-if="form.recentPhoto==''|| form.recentPhoto==undefined" :src="require('@/assets/images/profile.jpg')"/>
                  <img class="img-li-b--url" v-else :src="base + form.recentPhoto"/>
                  <div class="img-li-b--bottom">
                    <div class="img-li-b--name">现场近照</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="8">
              <el-form-item label="性别">{{ this.selectDictLabel(this.dict.type.sys_user_sex, form.sex) }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政治面貌">{{ form.politicalStatus }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="8">
              <el-form-item label="民族">{{ form.nation }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="文化程度">{{ form.degreeName }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="8">
              <el-form-item label="出生日期">{{ parseTime(form.birthDate, '{y}-{m}-{d}') }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="紧急联系人">{{ form.urgentContact }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="8">
              <el-form-item label="身份证号">{{ form.idNo }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人电话">{{ form.urgentTel }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="12">
              <el-form-item label="地址">{{ form.address }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="12">
              <el-form-item label="发证机关">{{ form.signingOrg }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row0" type="flex">
            <el-divider content-position="left">岗位信息</el-divider>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="12">
              <el-form-item label="岗位状态">
                <dict-tag :options="dict.type.labour_staff_status" :value="form.status"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位工种">{{ form.postName }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="12">
              <el-form-item label="项目标段">{{ form.bidName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="进场日期">{{ parseTime(form.enterDate, '{y}-{m}-{d}') }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="12">
              <el-form-item label="施工队伍">{{ form.battalionName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="退场日期">{{ parseTime(form.exitDate, '{y}-{m}-{d}') }}</el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el-row1" type="flex">
            <el-col :span="12">
              <el-form-item label="施工班组">{{ form.teamName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班组长">{{ this.selectDictLabel(this.dict.type.sys_yes_no, form.isMonitor) }}</el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="从业信息" name="record">
          <el-row :gutter="20" type="flex" style="padding-top: 15px;">
            <el-table :data="recordList" border height="450">
              <el-table-column label="项目标段" align="center" prop="institutionName" />
              <el-table-column label="进场日期" align="center" prop="enterDate" />
              <el-table-column label="退场日期" align="center" prop="exitDate" />
              <el-table-column label="施工队伍" align="center" prop="battalionName" />
              <el-table-column label="施工班组" align="center" prop="teamName" />
              <el-table-column label="岗位工种" align="center" prop="postName" />
              <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.labour_staff_status" :value="scope.row.status"/>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="身份证照" name="photo">
          <el-row :gutter="20" type="flex" style="padding-top: 100px;">
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8">
              <div class="img-show">
                <img :src="base + form.cardFrontPhoto" v-if="form.cardFrontPhoto != undefined" class="avatar">
                <span class="actions">
                  </span>
              </div>
              <div class="tip" style="text-align: center;padding-top: 10px;width: 300px;">身份证正面（头像）</div>
            </el-col>
            <el-col :span="8">
              <div class="img-show">
                <img :src="base + form.cardBackPhoto" v-if="form.cardBackPhoto != undefined" class="avatar">
                <span class="actions">
                  </span>
              </div>
              <div class="tip" style="text-align: center;padding-top: 10px;width: 300px;">身份证背面（国徽）</div>
            </el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="合同信息" name="contract">
          <el-row :gutter="20" class="mb8" style="padding-top: 15px;">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAddContract"
                v-hasPermi="['labour:staff:add']"
              >新增</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex">
            <el-table :data="contractList" border>
              <el-table-column label="项目" align="center" prop="projectName" :show-overflow-tooltip="true" width="250" />
              <el-table-column label="标段" align="center" prop="institutionName" width="200" />
              <el-table-column label="合同状态" align="center" prop="status">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.labour_staff_contract_status" :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column label="合同编号" align="center" prop="code" />
              <el-table-column label="开始日期" align="center" prop="beginDate" />
              <el-table-column label="结束日期" align="center" prop="endDate" />
              <el-table-column label="签订日期" align="center" prop="signDate" />
              <el-table-column label="合同附件" align="center" class-name="small-padding fixed-width" width="120">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-picture"
                    type="primary"
                    size="small"
                    circle
                    v-if="scope.row.annexCount > 0"
                    @click="handleFile(scope.row)">
                  </el-button>
                  <el-button
                    icon="el-icon-picture-outline"
                    size="small"
                    circle
                    v-if="scope.row.annexCount == 0"
                    @click="handleFile(scope.row)">
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdateContract(scope.row)"
                    v-hasPermi="['labour:staff:edit']"
                  >修改</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDeleteContract(scope.row)"
                    v-hasPermi="['labour:staff:remove']"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="银行账户" name="bank">
          <el-row :gutter="20" class="mb8" style="padding-top: 15px;">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAddBank"
                v-hasPermi="['labour:staff:add']"
              >新增</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="20" type="flex">
            <el-table :data="bankList" border>
              <el-table-column label="银行卡号" align="center" prop="bankAccount"/>
              <el-table-column label="银行名称" align="center" prop="bankName"/>
              <el-table-column label="开户银行" align="center" prop="openBank"/>
              <el-table-column label="是否默认" align="center" prop="top">
                <template slot-scope="scope">
                  <el-tag type="success" v-if="scope.row.top =='Y'">默认</el-tag>
                  <el-button v-else
                    size="mini"
                    type="danger"
                    icon="el-icon-top"
                    @click="handleBankTop(scope.row)"
                    v-hasPermi="['labour:staff:add']"
                  >设置默认</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdateBank(scope.row)"
                    v-hasPermi="['labour:staff:edit']"
                  >修改</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDeleteBank(scope.row)"
                    v-hasPermi="['labour:staff:remove']"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <!-- 新增修改合同信息 -->
    <el-dialog :title="contract.title" :visible.sync="contract.open" :close-on-click-modal="false" style="margin-top: 100px" width="500px" append-to-body>
      <el-form ref="contractForm" :model="contract.form" :rules="contract.rules" label-width="80px">
        <el-form-item label="合同状态" prop="status">
          <el-radio-group v-model="contract.form.status">
            <el-radio
              v-for="dict in dict.type.labour_staff_contract_status"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="合同编号" prop="code">
          <el-input v-model="contract.form.code" placeholder="请输入合同编号"/>
        </el-form-item>
        <el-form-item label="开始日期" prop="beginDate">
          <el-date-picker clearable
            style="width: 100%"
            v-model="contract.form.beginDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择开始日期"
            :picker-options="beginDatePickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker clearable
            style="width: 100%"
            v-model="contract.form.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择结束日期"
            :picker-options="endDatePickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="签订日期" prop="signDate">
          <el-date-picker clearable
            style="width: 100%"
            v-model="contract.form.signDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择签订日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitContractForm">确 定</el-button>
        <el-button @click="cancelContract">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 合同附件 -->
    <contractFile ref="contractFile"></contractFile>

    <!-- 新增修改银行账户 -->
    <el-dialog :title="bank.title" :visible.sync="bank.open" :close-on-click-modal="false" style="margin-top: 100px" width="500px" append-to-body>
      <el-form ref="bankForm" :model="bank.form" :rules="bank.rules" label-width="80px">
        <el-form-item label="银行卡号" prop="bankAccount">
          <el-input v-model="bank.form.bankAccount" placeholder="请输入银行卡号"/>
        </el-form-item>
        <el-form-item label="银行名称" prop="bankName">
          <el-input v-model="bank.form.bankName" placeholder="请输入银行名称"/>
        </el-form-item>
        <el-form-item label="开户银行" prop="openBank">
          <el-input v-model="bank.form.openBank" placeholder="请输入开户银行"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBankForm">确 定</el-button>
        <el-button @click="cancelBank">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { browse } from "@/api/site/labour/staff";
  import { getAge } from "@/utils/master";
  import { getStaffContractList, getStaffContract, addStaffContract, updateStaffContract, delStaffContract } from "@/api/site/labour/contract";
  import { getStaffBankList, getStaffBank, addStaffBank, updateStaffBank, delStaffBank, setStaffBankTop } from "@/api/site/labour/bank";
  import contractFile from "@/views/site/labour/staff/file";
  export default {
    name: "staffView",
    dicts: ['sys_user_sex', 'labour_staff_status', 'sys_yes_no', 'labour_staff_contract_status'],
    components: { contractFile },
    data() {
      return {
        base: process.env.VUE_APP_BASE_API,
        // 弹出层标题
        activeName: "basic",
        tabLabel: "基本信息",
        id: undefined,
        idNo: undefined,
        age: undefined,
        form: {},
        // 从业记录列表
        recordList: [],
        // 合同信息列表
        contractList: [],
        // 银行账户列表
        bankList: [],
        // 合同信息相关属性
        contract: {
          queryParams: {
            idNo: undefined
          },
          title: "",
          open: false,
          form: {},
          rules: {
            status: [
              { required: true, message: "合同状态不能为空", trigger: "blur" }
            ],
            code: [
              { required: true, message: "合同编号不能为空", trigger: "blur" },
              { max: 32, message: '合同编号最大长度为32个字符', trigger: 'blur'}
            ],
            beginDate: [
              { required: true, message: "开始日期不能为空", trigger: "blur" }
            ],
            endDate: [
              { required: true, message: "结束日期不能为空", trigger: "blur" }
            ]
          }
        },
        // 银行账户相关属性
        bank: {
          queryParams: {
            idNo: undefined
          },
          title: "",
          open: false,
          form: {},
          rules: {
            bankAccount: [
              { required: true, message: "银行卡号不能为空", trigger: "blur" },
              { max: 24, message: '银行卡号最大长度为24个字符', trigger: 'blur'}
            ],
            bankName: [
              { required: true, message: "银行名称不能为空", trigger: "blur" },
              { max: 32, message: '银行名称最大长度为32个字符', trigger: 'blur'}
            ],
            openBank: [
              { max: 64, message: '开户银行最大长度为64个字符', trigger: 'blur'}
            ],
          }
        },
        // 开始 截止 时间范围控制
        beginDatePickerOptions: {
          disabledDate: (time) => {
            if (this.contract.form.endDate) {
              return time.getTime() > new Date(this.contract.form.endDate).getTime();
            }
          }
        },
        endDatePickerOptions: {
          disabledDate: (time) => {
            if (this.contract.form.beginDate) {
              return new Date(this.contract.form.beginDate).getTime() > time.getTime();
            }
          }
        },
      }
    },
    created() {
      this.id = this.$route.query.id;
      this.idNo = this.$route.query.idNo;
      this.contract.queryParams.idNo = this.$route.query.idNo;
      this.bank.queryParams.idNo = this.$route.query.idNo;
      this.activeName = "basic";
      this.getInfo();
      this.getStaffContractList();
      this.getStaffBankList();
    },
    methods: {
      getInfo() {
        browse(this.id).then(response => {
          this.form = response.staff;
          this.form.bidName = response.bidName;
          this.recordList = response.records;
          this.age = getAge(this.form.birthDate);
          this.open = true;
        });
      },
      // 查询合同信息列表
      getStaffContractList() {
        getStaffContractList(this.contract.queryParams).then(response => {
          this.contractList = response.rows;
        });
      },
      // 查询银行账户列表
      getStaffBankList() {
        getStaffBankList(this.bank.queryParams).then(response => {
          this.bankList = response.rows;
        });
      },
      handleTabClick(tab) {
        this.tabLabel = tab.label;
      },
      // 重置合同信息表单
      resetContractForm() {
        this.contract.form = {
          id: null,
          uuid: null,
          staffId: null,
          idNo: null,
          institutionCode: null,
          status: 'Y',
          code: null,
          beginDate: null,
          endDate: null,
          signDate: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null
        };
        this.resetForm("contractForm");
      },
      // 重置银行账户表单
      resetBankForm() {
        this.bank.form = {
          id: null,
          idNo: null,
          bankName: null,
          bankAccount: null,
          openBank: null,
          top: 'Y',
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        };
        this.resetForm("bankForm");
      },
      // 新增劳务工合同按钮事件
      handleAddContract() {
        this.resetContractForm();
        this.contract.form.staffId = this.id;
        this.contract.form.idNo = this.idNo;
        this.contract.open = true;
        this.contract.title = "新增劳务合同";
      },
      // 新增银行账户按钮事件
      handleAddBank() {
        this.resetBankForm();
        this.bank.form.idNo = this.idNo;
        this.bank.open = true;
        this.bank.title = "新增银行账户";
      },
      // 修改劳务工合同按钮事件
      handleUpdateContract(row) {
        this.resetContractForm();
        const id = row.id || this.ids;
        getStaffContract(id).then(response => {
          this.contract.form = response.data;
          this.contract.open = true;
          this.contract.title = "修改劳务合同";
        });
      },
      // 修改银行账户按钮事件
      handleUpdateBank(row) {
        this.resetBankForm();
        const id = row.id || this.ids;
        getStaffBank(id).then(response => {
          this.bank.form = response.data;
          this.bank.open = true;
          this.bank.title = "修改银行账户";
        });
      },
      // 删除劳务工合同按钮事件
      handleDeleteContract(row) {
        const ids = row.id || this.ids;
        const top = row.top;
        if (top == 'Y') {
          this.$modal.confirm('该合同记录已同步到劳务工花名册，删除将会重置劳务工合同信息，确定删除？').then(function() {
            return delStaffContract(ids);
          }).then(() => {
            this.getStaffContractList();
            this.$modal.msgSuccess("操作成功");
          }).catch(() => {});
        } else {
          this.$modal.confirm('是否确认删除选中的数据项？').then(function() {
            return delStaffContract(ids);
          }).then(() => {
            this.getStaffContractList();
            this.$modal.msgSuccess("操作成功");
          }).catch(() => {});
        }
      },
      // 删除劳务工银行按钮事件
      handleDeleteBank(row) {
        const ids = row.id || this.ids;
        const top = row.top;
        if (top == 'Y') {
          this.$modal.confirm('该银行账户已同步到劳务工花名册，删除将会重置劳务工银行账户，确定删除？').then(function() {
            return delStaffBank(ids);
          }).then(() => {
            this.getStaffBankList();
            this.$modal.msgSuccess("操作成功");
          }).catch(() => {});
        } else {
          this.$modal.confirm('是否确认删除选中的数据项？').then(function() {
            return delStaffBank(ids);
          }).then(() => {
            this.getStaffBankList();
            this.$modal.msgSuccess("操作成功");
          }).catch(() => {});
        }
      },
      // 取消劳务工合同按钮事件
      cancelContract() {
        this.contract.open = false;
        this.resetContractForm();
      },
      // 取消劳务工合同按钮事件
      cancelBank() {
        this.bank.open = false;
        this.resetBankForm();
      },
      /** 提交按钮-合同信息 */
      submitContractForm() {
        this.$refs["contractForm"].validate(valid => {
          if (valid) {
            if (this.contract.form.id != null) {
              updateStaffContract(this.contract.form).then(response => {
                this.$modal.msgSuccess("操作成功");
                this.contract.open = false;
                this.getStaffContractList();
              });
            } else {
              addStaffContract(this.contract.form).then(response => {
                this.$modal.msgSuccess("操作成功");
                this.contract.open = false;
                this.getStaffContractList();
              });
            }
          }
        });
      },
      /** 提交按钮-银行账户 */
      submitBankForm() {
        this.$refs["bankForm"].validate(valid => {
          if (valid) {
            if (this.bank.form.id != null) {
              updateStaffBank(this.bank.form).then(response => {
                this.$modal.msgSuccess("操作成功");
                this.bank.open = false;
                this.getStaffBankList();
              });
            } else {
              addStaffBank(this.bank.form).then(response => {
                this.$modal.msgSuccess("操作成功");
                this.bank.open = false;
                this.getStaffBankList();
              });
            }
          }
        });
      },
      // 设置银行账户置顶默认
      handleBankTop(row) {
        setStaffBankTop(row.id).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getStaffBankList();
        });
      },
      /** 合同文件按钮操作 */
      handleFile(row) {
        this.$refs.contractFile.show(row.uuid);
      },
    }
  }
</script>
<style type="text/css">
  .el-row0 {
    height: 55px;
  }
  .el-row1 {
    height: 40px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
</style>

<style lang="scss" scoped>

  .img-list {
    overflow: hidden;
    width: 100%;

    // 文件列表
    .img-li-box {
      float: left;
      text-align: left;
      position: relative;
      display: inline-block;
      width: 120px;
      height: 140px;
      padding: 5px;
      margin: 5px 20px 20px 0;
      border: 1px solid #d1dbe5;
      border-radius: 4px;
      transition: all .3s;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

      // 图片
      .img-li-b--url {
        display: block;
        width: 100%;
        height: 100px;
        margin: 0 auto;
        border-radius: 4px;
      }

      // 底部
      .img-li-b--bottom {
        margin-top: 10px;
        // 名称
        .img-li-b--name {
          text-align: center;
          padding-top: 5px;
          width: 90%;
          text-overflow: ellipsis;
          overflow: hidden;
          height: 25px;
          line-height: 10px;
        }
      }
    }
  }

  .img-show{
    position: relative;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    cursor: pointer;
    overflow: hidden;
  }

  .avatar{
    width: 300px;
    height: 200px;
    display: block;
  }

  .actions{
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 200px;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
  }
  /*.actions:hover{*/
  /*  opacity: 1;*/
  /*}*/
  /*.actions:hover span{*/
  /*  display: inline-block;*/
  /*}*/
  /*.actions span{*/
  /*  display: none;*/
  /*  margin: 0 16px;*/
  /*  cursor: pointer;*/
  /*}*/

</style>
